<template lang="pug">
  <div class="home">
    el-form.form(v-bind:model="elForm", v-bind:rules="rules", ref="elForm")
      el-form-item
        h2 请输入昵称
      el-form-item(label="昵称", prop="name")
        el-input.input(v-model="elForm.name")/
      el-form-item
        el-button(@click="join", type="primary") 进入
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      elForm: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    join() {
      window.localStorage.setItem('name', this.elForm.name)
      this.$router.push('/chat')
    }
  },
  mounted () {
    this.elForm.name = window.localStorage.getItem('name');
  },
};
</script>

<style lang="less" scoped>
.home {
  .form {
    background-color: #fff;
    width: 50%;
    height: 300px;
    // border: solid 1px #777;
    border-radius: 20px;
    box-shadow: 0 0 10px #777;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .input {
      width: 90%;
    }
  }
  @media screen and (max-width: 780px) {
    .form {
      width: 80%;
    }
  }
}
</style>
